<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> <div class="container"> <div class="row"> <a href="#" class="btn btn-primary has-icon mt15"> Click to JOIN NOW <i class="bi bi-arrow-right"></i> </a> </div> </div>

.btn { font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; padding: 12px 25px 11px; } .btn.has-icon { padding-right: 60px; position: relative; overflow: hidden; } .btn.has-icon i { font-size: 18px; position: absolute; right: 0px; top: -2px; padding: 11px; background-color: rgba(0, 0, 0, 0.2); }